<template>
  <div class="role-manage">
    <el-button type="primary" @click="openDialog('add')">添加角色</el-button>
    <el-table :data="roleList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="角色名称"></el-table-column>
      <el-table-column prop="description" label="角色描述"></el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="text" @click="openDialog('edit', scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteRole(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="角色管理" width="50%" :before-close="handleClose">
      <el-form :model="roleForm" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="roleForm.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.description" placeholder="请输入角色描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveRole">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 模拟角色数据
const roleList = ref([
  { id: 1, name: '管理员', description: '拥有所有权限' },
  { id: 2, name: '普通用户', description: '拥有基本权限' },
]);

const dialogVisible = ref(false);
const roleForm = ref({
  id: null,
  name: '',
  description: '',
});

// 打开对话框
const openDialog = (type, row = null) => {
  dialogVisible.value = true;
  if (type === 'add') {
    roleForm.value = { id: null, name: '', description: '' };
  } else if (type === 'edit') {
    roleForm.value = { ...row };
  }
};

// 保存角色
const saveRole = () => {
  if (roleForm.value.id) {
    // 编辑角色
    const index = roleList.value.findIndex(item => item.id === roleForm.value.id);
    if (index !== -1) {
      roleList.value[index] = { ...roleForm.value };
      ElMessage.success('编辑成功');
    }
  } else {
    // 添加角色
    roleForm.value.id = roleList.value.length + 1;
    roleList.value.push({ ...roleForm.value });
    ElMessage.success('添加成功');
  }
  dialogVisible.value = false;
};

// 删除角色
const deleteRole = (row) => {
  const index = roleList.value.findIndex(item => item.id === row.id);
  if (index !== -1) {
    roleList.value.splice(index, 1);
    ElMessage.success('删除成功');
  }
};

// 关闭对话框时重置表单
const handleClose = () => {
  roleForm.value = {
    id: null,
    name: '',
    description: '',
  };
};
</script>

<style scoped>
.role-manage {
  padding: 20px;
}

.el-button {
  margin-bottom: 10px;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #f5f7fa;
}

.el-table td,
.el-table th {
  padding: 12px;
}

.el-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.el-dialog__header {
  background-color: #f5f7fa;
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 10px 20px;
  border-top: 1px solid #e4e7ed;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
